<template>
	<view class="tabs">
		<view class="tab-item" :class="[activeCode==key?'tab-active':'']" v-for="(value, key, index) in tabs" :key='index' @click='tabChange(key)'>{{value}}</view>
	</view>
</template>

<script>
	export default{
		props:{
			tabs:{
				type:Object,
				default(){
					return {}
				}
			},
			activeCode:{
				default:'1'
			}
		},
		methods:{
			tabChange(code){
				if(this.activeCode===code){
					return;
				}
				this.$emit('tabChange',code)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.tabs{
		display: flex;
		font-size: 28upx;
		color: #333333;
	}
	.tab{
		&-item{
			flex: 1;
			text-align: center;
		}
		&-active{
			color: #4a96f2;
		}
	}
</style>
